<template>
  <div class="language-switcher">
    <button @click="setLang('zh')" :class="{ active: $i18n.locale === 'zh' }">中文</button>
    <button @click="setLang('en')" :class="{ active: $i18n.locale === 'en' }">English</button>
  </div>
</template>

<script setup>
import { useStore } from '../store';

const store = useStore();

function setLang(lang) {
  store.setLang(lang);
  // 更新 i18n 的语言
  document.documentElement.setAttribute('lang', lang);
}
</script>

<style scoped>
.language-switcher {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
}

.language-switcher button {
  padding: 8px 12px;
  margin-left: 5px;
  border: none;
  background-color: #333;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

.language-switcher button.active {
  background-color: #ff0000;
}
</style>